<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		li{
			list-style: none;
		}
	</style>
</head>
<body>
	<h1>请选择于谦爱好</h1>
	<ul>
		<li><input type="checkbox" name="like" id="" value="" />抽烟</li>
		<li><input type="checkbox" name="like" id="" value="" />喝酒</li>
		<li><input type="checkbox" name="like" id="" value="" />嚼槟榔</li>
		<li><input type="checkbox" name="like" id="" value="" />蹦迪</li>
	</ul>
	<button onclick="select(true)">全选</button>
	<button onclick="select(false)">全不选</button>
	<button>反选</button>
	<script type="text/javascript">
		var like = document.getElementsByName('like')
		var btns = document.querySelectorAll('button')
		function select(bool){
			for(var i = 0; i < like.length; i++){
				like[i].checked = bool
			}
		}
		btns[2].onclick = function(){
			for(var i = 0; i < like.length; i++){
				if(like[i].checked == true){
					like[i].checked = false
				}else{
					like[i].checked = true
				}
			}
		}
	</script>
</body>
</html>